<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>应用jQuery的bind和css等方法设计折叠与展开网页内容的特效</title>
<style>
html { font-size: 12px; color: #404040; font-family: 'Microsoft YaHei','Arial','SimSun'; }
body, button, ul, li, ol, p, dl, dd, h1, h2, h3, h4, h5, h6, img, iframe, form, div { margin: 0; padding: 0; list-style-type: none; border: 0; }
.filtrate_box a {
	font-size: 12px;
	color: #000;
	text-decoration: none;
}

.filtrate_box a:hover, .filtrate_box a:hover span { text-decoration: underline; color: #c00; }
.filtrate_box {
	border: solid 1px #d4d4d4;
	padding: 1px;
	font-family: Arial;
	color: #555;
	zoom: 1;
	margin-bottom: 10px;
	width: 980px;
	margin-top: 10px;
	margin-left: 10px;
}
.filtrate_box .head:after, .filtrate_box .list:after,.filtrate_box:after { content: "."; height: 0; display: block; clear: both; visibility: hidden; }
.filtrate_box .head { background: #f2f2f2; padding: 0 10px 0 8px; zoom: 1; _height: 35px; }
.filtrate_box .head h3, .filtrate_box .head .kind { float: left; display: block; height: 35px; line-height: 35px; font-size: 14px; }
.filtrate_box .head h3 { padding-left: 22px; color:#555;}
.filtrate_box .head .kind { padding: 0 10px 0 16px; font-size: 12px; width: 70px; _padding-left: 4px; }
.filtrate_box .head .opt_list { width: 742px; overflow: hidden; height: 28px; float: left; }
.filtrate_box .head ul { float: left; padding: 6px 0; }
.filtrate_box .head ul li { float: left; line-height: 20px; padding: 2px 0; _font-family: SimSun; white-space: nowrap; }
.filtrate_box .head ul li .tt { padding: 0 20px 0 10px; color: #fd4708; font-weight: bold; }
.filtrate_box .head ul li .bn { display: inline-block; vertical-align: top; border: solid 1px #ff7a29; height: 14px; line-height: 14px; padding: 1px 0 1px 4px; background: #fff; border-right: 0; overflow: hidden; *line-height: 16px; }
.filtrate_box .head ul .block { border: solid 1px #ff7a29; border-left: 0; padding: 1px 1px 1px; display: inline-block; height: 14px; line-height: 14px; vertical-align: top; cursor: pointer; padding-left: 5px; margin-right: 10px; background: #fff; overflow: hidden; }
.filtrate_box .head ul .block .t { display: inline-block; font-family: SimSun; vertical-align: top; _padding-top: 1px;color:#FD4708;}
.filtrate_box .head ul .block .close { display: inline-block; background: #ff7a29 url(images/icon_bg.png) -39px -156px no-repeat; width: 13px; height: 14px; vertical-align: top; margin-left: 5px; cursor: pointer; }
.filtrate_box .head .empty,.filtrate_box .head .empty:hover { float: right; line-height: 35px; cursor: pointer; white-space: nowrap; color: #1A66B3; }
.filtrate_box .list { line-height: 18px; padding: 0 3px 10px; zoom: 1; position: relative; float:left;}
.filtrate_box .list a { padding: 0 2px; display: inline-block; }
.filtrate_box .list dt { float: left; text-align: right; padding: 10px 14px 0 0; border-top: solid 1px #f0e4e4; }
.filtrate_box .list dt b { display: inline-block; width: 120px; padding-right: 2px; }
.filtrate_box .list .brand_t { border-top: 0; padding-top: 10px; }
.filtrate_box .list .all { display: inline-block; }
.filtrate_box .list .on, .filtrate_box .list a:hover, .filtrate_box .list .red { background: #ff7a29; color: #fff; text-decoration: none; }
.filtrate_box .list .on a { color: #fff; }
.filtrate_box .list dd { float: left; width: 782px; border-top: solid 1px #f0e4e4; padding: 10px 0 4px; position: relative; }
.filtrate_box .list dd a { margin-right: 14px; }
.filtrate_box .list .height {
	overflow: hidden;
	height: 18px;
	margin-bottom: 4px;
	padding-bottom: 0;
}
.filtrate_box .list .brand_height {
	overflow: hidden;
	height: 24px;
	margin-bottom: 4px;
	padding-bottom: 0;
}
.filtrate_box .list .brand_opt {
	position: relative;
	border-top: 0;
	padding-top: 0;
	padding-top: 10px;
    margin-bottom: 6px; 
}
.filtrate_box .list .brand_opt span {
	width: 96px;
	display: block;
	overflow: hidden;
	white-space: nowrap;
	margin-right: 16px;
	height: 18px;
	float: left;
	margin-bottom: 6px;
}
.filtrate_box .list .brand_opt span a {
	margin-right: 0;
}
.filtrate_box .list .brand_opt .button {
	position: absolute;
	right: 0;
	top: 10px;
	background: url(images/arrow_b.png) no-repeat 0 2px;
	width: 30px;
	height: 18px;
	text-align: center;
	cursor: pointer;
	margin: 0;
	_padding-top: 2px;
	_height: 16px;
	padding-left: 16px;
}
.filtrate_box .list .brand_opt .btn_b {
	background: url(images/arrow_t.png) no-repeat 0 2px;
}
.filtrate_box .list .brand_opt .hover {
	background-position: 0 -20px;
}
.filtrate_box .all_sort { height: 21px; }
</style>   

</head>

<body>
<script src="js/jquery.js" type="text/javascript"></script>
<div class="filtrate_box" name="">
  <div class="head">
    <h3>商品筛选：</h3>
    <div class="opt_list" style="">
      <ul>
        <li class="all_sort"><span class="tt">童装童鞋</span></li>
      </ul>
    </div>
  </div>
  <dl class="list">
    <dt class="brand_t" style=""><b>品牌：</b><a href="#" class="red all">全部</a></dt>
    <dd class="brand_opt brand_height allbrand" style="">
      <span ><a name="brand" class="" title="巴拉巴拉" href="#">巴拉巴拉</a></span>
      <span ><a name="brand" class="" title="笛莎" href="#">笛莎</a></span>
      <span ><a name="brand" class="" title="爱.制造" href="#">爱.制造</a></span>
      <span ><a name="brand" class="" title="dangdang kids" href="#">dangdang&nbsp;kids</a></span>
      <span ><a name="brand" class="" title="安奈儿" href="#">安奈儿</a></span>
      <span ><a name="brand" class="" title="Miffy 米菲" href="#">Miffy&nbsp;米菲</a></span>
      <span ><a name="brand" class="" title="Disney迪士尼" href="#">Disney迪士尼</a></span>
      <span ><a name="brand" class="" title="小猪班纳" href="#">小猪班纳</a></span>
      <span ><a name="brand" class="" title="马拉丁" href="#">马拉丁</a></span>
      <span ><a name="brand" class="" title="可可鸭" href="#">可可鸭</a></span>
      <span ><a name="brand" class="" title="Barbie 芭比" href="#">Barbie&nbsp;芭比</a></span>
      <span ><a name="brand" class="" title="唯思凡" href="#">唯思凡</a></span>
      <span ><a name="brand" class="" title="珍妮.贝尔" href="#">珍妮.贝尔</a></span>
      <span ><a name="brand" class="" title="Hello Kitty" href="#">Hello&nbsp;Kitty</a></span>
      <span ><a name="brand" class="" title="英格里奥" href="#">英格里奥</a></span>
      <span ><a name="brand" class="" title="李宁" href="#">李宁</a></span>
      <span ><a name="brand" class="" title="哈比熊" href="#">哈比熊</a></span>
      <span ><a name="brand" class="" title="阿米狗" href="#">阿米狗</a></span>
      <span ><a name="brand" class="" title="水孩儿" href="#">水孩儿</a></span>
      <span ><a name="brand" class="" title="派克兰帝" href="#">派克兰帝</a></span>
      <span ><a name="brand" class="" title="季季乐" href="#">季季乐</a></span>
      <span ><a name="brand" class="" title="Snoopy史努比" href="#">Snoopy史努比</a></span>
      <span ><a name="brand" class="" title="瓢虫之家" href="#">瓢虫之家</a></span>
      <span ><a name="brand" class="" title="TONY BOY" href="#">TONY&nbsp;BOY</a></span>
      <span ><a name="brand" class="" title="爱乐·贝兜儿" href="#">爱乐·贝兜儿</a></span>
      <span ><a name="brand" class="" title="belbaby" href="#">belbaby</a></span>          
      <span  class="brand_bottom"><a name="brand" class=" " title="小蓝羊" href="#">小蓝羊</a></span>
      <span class="button" style="display:none;" id="tjbtn">展开</span>
    </dd>
  </dl>
</div>
<script type="text/javascript">
  var filter_brand_height = 64;
  $(function(){
	var brand_top = $('.allbrand').offset().top;
	var brand_bottom = $('.brand_bottom').offset().top;
	if(brand_bottom-brand_top < filter_brand_height){  //全部品牌未超过5行
		$('.allbrand').removeClass('brand_height');	}
	else{
		$(".allbrand").css("height",filter_brand_height);
		$('#tjbtn').show();
		$('#tjbtn').bind("click",togglebrand); }		
  });
  
  function togglebrand(){
	if ($('.allbrand').hasClass('brand_height')) {
		$('.allbrand').css("height", "");
		$('.allbrand').removeClass('brand_height');
		$('#tjbtn').addClass("btn_b");
		$('#tjbtn').html('收起'); } 
	else {
		$('.allbrand').addClass('brand_height');
		$('#tjbtn').removeClass("btn_b");
		$(".allbrand").css("height",filter_brand_height);
		$('#tjbtn').html('展开'); }
  }
</script>
</body>
</html>
